<template>
    <div>
        <!-- visible.sync  v-model  自定义组件上能够使用v-model -->
        <el-dialog :title="form.uid ? '管理员编辑' : '管理员添加'" :visible.sync="buffer.formBuffer">
            <el-form :model="form">
                {{ form }}
                <!-- 顶级管理员id==>pid -->
                <el-form-item label="管理员角色" :label-width="formLabelWidth">
                    <el-select v-model="form.roleid" placeholder="请选择">
                        <el-option v-for="item in roleList" :key="item.id" :label="item.rolename" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <!-- 管理员名称 -->
                <el-form-item label="管理员名称" :label-width="formLabelWidth">
                    <el-input v-model="form.username" autocomplete="off"></el-input>
                </el-form-item>
                <!-- 管理员路由 -->
                <el-form-item label="管理员密码" :label-width="formLabelWidth" v-show="form.pid != 0">
                    <el-input v-model="form.password" autocomplete="off"
                        :placeholder="form.uid ? '不填写则不修改' : ''"></el-input>
                </el-form-item>
                <!-- 管理员状态 -->
                <el-form-item label="管理员状态" :label-width="formLabelWidth">
                    <el-switch v-model="form.status" :active-value="1" :inactive-value="2">
                    </el-switch>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="buffer.formBuffer = false">取 消</el-button>
                <el-button type="primary" @click="submit()">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    props: ['buffer', 'roleList'],
    data() {
        return {
            form: {
                roleid: "",  //角色数据id
                username: '',//管理员名称
                password: '',//管理员密码
                status: 1//1 启用  2禁用
            },
            formLabelWidth: '120px'
        };
    },
    watch: {
        buffer: {
            handler(newV, oldV) {
                if (newV.formBuffer == false) {
                    this.form = {
                        roleid: "",  //角色数据id
                        username: '',//管理员名称
                        password: '',//管理员密码
                        status: 1//1 启用  2禁用
                    }
                }
            },
            deep: true,//使用深度监听
        }
    },
    mounted() {
        // 监听list组件传值 进行修改数据回填
        this.$BUS.$on('edit', (info) => {
            // 解构获取修改数据
            let { row } = info
            console.log(row)
            // 删除不需要回填的修改数据
            delete (row.id)
            delete (row.rolename)
            delete (row.randstr)
            row.password = ""
            // 赋值回填数据
            this.form = JSON.parse(JSON.stringify(row))
            // 弹起表单
            this.buffer.formBuffer = true
        })
    },
    methods: {
        submit() {
            // let a = 12;注意次三元上方语句结尾一定加 ';'
            (this.form.uid ? this.$api.reqEditUser(this.form) : this.$api.reqAddUser(this.form))
                .then(res => {
                    console.log(res)
                    // 3.1关闭弹窗
                    this.buffer.formBuffer = false
                    // 3.2提示用户操作成功
                    this.$message({ type: "success", message: "操作成功！" })
                    // 3.3赋空表单数据(使用了watch)
                    // 3.4更新数据列表
                    this.$emit('channel', '更新数据吧！')
                })
                .catch(err => console.log(err))
        }
    },
};
</script>

<style scoped>

</style>
